<template>
    <el-card shadow="never" class="aui-card--fill">
        <div style="text-align:right;margin-bottom: 5px;">
            <el-button type="primary" size="small" @click="handleClick">转正</el-button>
            <el-button type="primary" size="small" @click="mobilizeClick">调动</el-button>
            <el-button type="primary" size="small" @click="departClick">离职</el-button>
            <el-button type="warning" size="small" @click="cancel">取消</el-button>
        </div>
        <div class="essential-information">
            <div class="essential-information-left">
                <el-descriptions :column="3" border>
                    <el-descriptions-item label="工号">
                        {{ detailedInformation.eeNumber }}
                    </el-descriptions-item>
                    <el-descriptions-item label="姓名">
                        {{ detailedInformation.realName }}
                    </el-descriptions-item>
                    <el-descriptions-item label="性别">
                        {{ detailedInformation.gender == 0 ? "男" : "女" }}
                    </el-descriptions-item>
                    <el-descriptions-item label="年龄">
                        {{ detailedInformation.age }}
                    </el-descriptions-item>
                    <el-descriptions-item label="民族">
                        {{ detailedInformation.nation }}
                    </el-descriptions-item>
                    <el-descriptions-item label="籍贯">
                        {{ detailedInformation.nativePlace }}
                    </el-descriptions-item>
                    <el-descriptions-item label="政治面貌">
                        {{ detailedInformation.political ? detailedInformation.political : '' }}
                    </el-descriptions-item>
                    <el-descriptions-item label="婚姻状况">
                        {{ detailedInformation.marriage }}
                    </el-descriptions-item>
                    <el-descriptions-item label="联系电话">
                        {{ detailedInformation.mobile }}
                    </el-descriptions-item>
                    <el-descriptions-item label="身份证号">
                        {{ detailedInformation.idNumber }}
                    </el-descriptions-item>
                    <el-descriptions-item label="现住址">
                        {{ detailedInformation.address }}
                    </el-descriptions-item>
                </el-descriptions>
            </div>
            <div class="essential-information-piture">
                <el-image style="width: 190px; height: 172px;margin-left: 10px;" :src="detailedInformation.headUrl"
                          :preview-src-list="srcList" @click="pictureBtn(detailedInformation.headUrl)"
                          v-if="detailedInformation.headUrl"></el-image>
                <el-image :src="require('@/assets/img/img.jpeg')" style="width: 190px; height: 172px;margin-left: 10px;"
                          v-else></el-image>
            </div>
        </div>
        <el-descriptions :column="4" border>
            <el-descriptions-item label="血型">
                {{ detailedInformation.blood ? detailedInformation.blood : '' }}
            </el-descriptions-item>
            <el-descriptions-item label="健康状况" :span="4">
                {{ detailedInformation.healthy }}
            </el-descriptions-item>
            <el-descriptions-item label="学历">
                {{ detailedInformation.education }}
            </el-descriptions-item>
            <el-descriptions-item label="毕业院校">
                {{ detailedInformation.graduate }}
            </el-descriptions-item>
            <el-descriptions-item label="专业" :span="2">
                {{ detailedInformation.major }}
            </el-descriptions-item>
            <el-descriptions-item label="开户行">
                {{ detailedInformation.bank }}
            </el-descriptions-item>
            <el-descriptions-item label="银行卡号" :span="4">
                {{ detailedInformation.bankCard }}
            </el-descriptions-item>
            <el-descriptions-item label="入职时间">
                {{ (detailedInformation.entryDate || '').substr(0, 10) }}
            </el-descriptions-item>
            <el-descriptions-item label="在职状态">
                {{ detailedInformation.jobStatus }}
            </el-descriptions-item>
            <el-descriptions-item label="部门">
                {{ detailedInformation.deptName }}
            </el-descriptions-item>
            <el-descriptions-item label="职务">
                {{ detailedInformation.post }}
            </el-descriptions-item>
            <el-descriptions-item label="转正时间">
                {{ detailedInformation.confirmDate ? (detailedInformation.confirmDate || '').substr(0, 10) : '' }}
            </el-descriptions-item>
            <el-descriptions-item label="离职时间">
                {{ detailedInformation.departDate ? (detailedInformation.departDate || '').substr(0, 10) : '' }}
            </el-descriptions-item>
        </el-descriptions>
        <h3>家庭成员</h3>
        <el-table :data="familyData" style="width: 100%" border>
            <el-table-column prop="relationship" label="与本人关系" align="center">
            </el-table-column>
            <el-table-column prop="realName" label="姓名" align="center">
            </el-table-column>
            <el-table-column prop="age" label="年龄" align="center">
            </el-table-column>
            <el-table-column prop="location" label="工作单位/就读院校" align="center">
            </el-table-column>
            <el-table-column prop="occupation" label="职业" align="center">
            </el-table-column>
            <el-table-column prop="mobile" label="联系电话" align="center">
            </el-table-column>
        </el-table>
        <h3>教育培训</h3>
        <el-table :data="educationData" style="width: 100%" border>
            <el-table-column prop="startDate" label="起" align="center">
            </el-table-column>
            <el-table-column prop="endDate" label="止" align="center">
            </el-table-column>
            <el-table-column prop="location" label="学校或培训地点" align="center">
            </el-table-column>
            <el-table-column prop="content" label="专业/培训内容" align="center">
            </el-table-column>
        </el-table>
        <h3>工作经历</h3>
        <el-table :data="workExperienceData" style="width: 100%" border>
            <el-table-column prop="startDate" label="起" align="center">
            </el-table-column>
            <el-table-column prop="endDate" label="止" align="center">
            </el-table-column>
            <el-table-column prop="companyName" label="公司名称" align="center">
            </el-table-column>
            <el-table-column prop="post" label="岗位" align="center">
            </el-table-column>
        </el-table>
    </el-card>
</template>

<script>
export default {
    props: {
        detailedInformation: {
            type: Object,
            default: Object,
        }
    },
    data() {
        return {
            srcList: [],
            familyData: [],  //家庭成员
            educationData: [], // 教育培训
            workExperienceData: [], // 工作经历
        };
    },
    mounted() {
        this.getFamily();//家庭成员
        this.getEducation();//教育培训
        this.getWorkExperience();//工作经历
    },
    methods: {
        //家庭成员接口--------
        getFamily() {
            this.$http.get("/employee/employeefamily/page", {params: {employeeId: this.detailedInformation.id}}).then(({data: res}) => {
                if (res.code !== 0) {
                    return this.$message.error(res.msg);
                }
                this.familyData = res.data.list
            })
        },
        // 教育培训接口-----
        getEducation() {
            this.$http.get("/employee/employeeeducation/page", {params: {employeeId: this.detailedInformation.id}}).then(({data: res}) => {
                if (res.code !== 0) {
                    return this.$message.error(res.msg);
                }
                this.educationData = res.data.list
            })
        },
        // 工作经历接口--------
        getWorkExperience() {
            this.$http.get("/employee/employeejob/page", {params: {employeeId: this.detailedInformation.id}}).then(({data: res}) => {
                if (res.code !== 0) {
                    return this.$message.error(res.msg);
                }
                this.workExperienceData = res.data.list;
            })
        },
        // 个人照片-预览
        pictureBtn(url) {
            this.srcList.push(url);
        },
        // 取消按钮
        cancel() {
            this.$emit('cancelBtn')
        },
        handleClick() {
            this.$router.push({
                path: '/hr-staff-conversion',
                query: {
                    employeeId: this.detailedInformation.id
                }
            })
        },
        mobilizeClick() {
            this.$router.push({
                path: '/hr-staff-transfer',
                query: {
                    employeeId: this.detailedInformation.id
                }
            })
        },
        departClick() {
            this.$router.push({
                path: '/hr-staff-leave',
                query: {
                    employeeId: this.detailedInformation.id
                }
            })
        }
    },
};
</script>
<style lang="scss" scoped>
.essential-information {
  display: flex;
  margin-bottom: 0px !important;

  .essential-information-left {
    width: 80%;
  }
}
</style>
  